<template>  
    <view class="container">  
		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.know_avatar || '/static/images/portrait.png'"></image>
				</view>
				<view class="info-box">
					<view class="username">{{userInfo.know_nickname || '游客'}}</view>
					<view class="username">{{getHidePhone || ''}}</view>
				</view>
			</view>
		</view>
		<view class="history-section icon">
			<list-cell icon="icon-kebiao" title="我的课表" @eventClick="navTo('/pages/user/timetable')"></list-cell>
			<list-cell icon="icon-kechengdagang" title="订单中心" @eventClick="navTo('/pages/user/order?state=0')"></list-cell>
			<list-cell icon="icon-shezhi" title="个人设置"  @eventClick="navTo('/pages/user/set')"></list-cell>
			<list-cell icon="icon-shouji" title="修改手机"  @eventClick="navTo('/pages/user/modifyPhone')"></list-cell>
		</view>
		<view class="list-cell log-out-btn bor10" @click="toLogout" v-if="hasLogin">
			<text class="cell-tit">退出登录</text>
		</view>
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
    import {  
        mapState,mapMutations,mapGetters
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell
		},
		data(){
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				messageCount: 0,
				commentCount: 0,
				series: 0,
				hasLogin: this.$mStore.getters.hasLogin,
			}
		},
		onLoad(){
			//this.doOnLogin();
			console.log('onload',this.userInfo)
		},
		onShow(){
			// this.doOnLogin();
			console.log('用户信息',this.userInfo)
			this.$mHelper.checkBindPhone();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
        computed: {
			...mapState(['userInfo']),
			getHidePhone(){
				let userInfo = this.userInfo,
					phone = '';
				if(userInfo && userInfo.know_phone){
					phone = this.$mHelper.hidePhone(userInfo.know_phone)
				}
				return phone;
			}
		},
        methods: {
			
			...mapMutations(['setUserInfo', 'logout']),
			doOnLogin(){
				console.log(111,this.hasLogin)
				if(!this.hasLogin){
					uni.showModal({
						title: "提示",
						content: "您还没有登录，请先登录？",
						showCancel: true,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({  
									url: '/pages/user/login'  
								})
							} else if (res.cancel) {
								uni.switchTab({  
									url: '/pages/index/index'  
								})
							}
						}
					});
					return ;
				}
				/* this.$api.memberGet('/user/get',{username: this.userInfo.username}).then(r=>{
					this.setUserInfo(r.data.body);
					if(!this.userInfo.phone){//没有绑定手机
						uni.showModal({
							title: "提示",
							content: "您还没有绑定手机，现在去绑定吗？",
							showCancel: true,
							cancelText: '退出',
							confirmText: "确定",
							success: (res)=>{
								if (res.confirm) {
									uni.navigateTo({  
										url: '/pages/user/modifyPhone'  
									})
								} else if (res.cancel) {
									this.logout();
									this.$api.logout().then(r=>{
										uni.switchTab({
											url: '/pages/index/index'
										})
									})
								}
							}
						})
					}
				});
				this.$api.memberGetWithoutLogin('/message/count').then(r=>{
					this.messageCount = r.data.body;
				});
				this.$api.memberGetWithoutLogin('/comment/count').then(r=>{
					this.commentCount = r.data.body;
				}); */
			},
			//退出登录
			/* toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
							this.logout();
							uni.switchTab({
								url: '/pages/index/index'
							})
				    	}
				    }
				});
			}, */
			/**
			 * 退出登录
			 */
			toLogout(){
				
				uni.showModal({
				    content: '确定要退出登录？',
				    success: (e)=>{
				    	if(e.confirm){
							//直接退出
							this.$mStore.commit('logout');
							
							uni.reLaunch({
								url: '/pages/index/index'
							})
				    	}	
				    }
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				this.$mHelper.navTo(url);
				/* if(!this.hasLogin){
					url = '/pages/user/login';
				}
				uni.navigateTo({  
					url
				})  */
			},
        }  
    }  
</script>  
<style lang='scss'>
	page{background: #f5f7f9;}
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	}

	.user-section{
		height:230upx;
		padding:30upx 30upx 30upx;
		position:relative;background: #dc1011;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.user-info-box{
		height:150upx;
		align-items:top;
		position:relative;
		z-index: 1;
		text-align:center;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: 30upx;
			color: #fff;
			margin:0 
		}
		.usersm{
			font-size: 26upx;
			color: #fff;
			margin-top: 30upx;
			text{
				background: rgba(255,255,255,.2);
				color: #fff;
				padding: 13upx 30upx 14upx;
				margin: 0 10upx;
				border-radius: 30upx;
			}
		}
		.iconfont{font-size: 50upx;color: #fff; position: absolute;top:-40upx;right:0}
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 22upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: 30upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.iconfont{
				color: #f6e5a3;
				margin-right:10upx;
			}
		}
		.e-m{
			font-size:30upx;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		margin-top: -150upx;
		position:relative;
		background: #f2f4f7;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size:24upx;
			color: #75787d;
		}
		.num{
			font-size:32upx;
			color:#303133;
			
		}
	}
	.order-section{
		@extend %section;
		padding: 30upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 130upx;
			border-radius: 10upx;
			font-size: 26upx;
			color: #333;
		}
		.iconfont{
			font-size: 50upx;
			margin: 10upx 0 6upx;
			color: #fff;width: 80%;text-align: center;background: linear-gradient(to right,#ffd046,#ffa448); border-radius: 10upx
		}
		:nth-child(2) .iconfont{background: linear-gradient(to right,#ffb977,#ff8f61);}
		:nth-child(3) .iconfont{background: linear-gradient(to right,#8be7d9,#55bbec);}
		:nth-child(4) .iconfont{background: linear-gradient(to right,#da94f8,#a580f2);}
	}
	.history-section{
		padding: 0upx 0 0;
		background: #fff;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: 30upx;
			color: #ff0000;
			line-height: 40upx;
			margin-left: 30upx;
			.iconfont{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
	}	
</style>